<template>
  <div id="zhu"></div>
  <div style="display: flex; ">
    <div id="main" style="width: 500px;height: 500px;"></div>
    <div id="file" style="width: 500px;height: 500px;"></div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import * as echarts from 'echarts';
import { countDuplicates } from '../../utils/echartsData'
// 基于准备好的dom，初始化echarts实例
const data1 = [
  {
    id: "1",
    name: '靶场名称1',
    cover:
      'https://img1.baidu.com/it/u=2863213704,737400670&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    level: "简单",
    category: 'SQL注入类',
    fileType: "镜像文件",
    createBy: "1"
  },
  {
    id: "2",
    name: '靶场名称2',
    cover:
      'https://img1.baidu.com/it/u=2863213704,737400670&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    level: "中等",
    category: '扫描类',
    fileType: "war",
    createBy: "2"
  },
  {
    id: "3",
    name: '靶场名称3',
    cover:
      'https://img1.baidu.com/it/u=2863213704,737400670&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    level: "高难",
    category: '文件类',
    fileType: "zip",
    createBy: "3"
  },
  {
    id: "4",
    name: '靶场名称4',
    cover:
      'https://img1.baidu.com/it/u=2863213704,737400670&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    level: "高难",
    category: '文件类',
    fileType: "zip",
    createBy: "4"
  },];
let newData = countDuplicates(data1, 'level')
let newData1 = countDuplicates(data1, 'fileType')

onMounted(() => {
  // 饼图1
  var myChart = echarts.init(document.getElementById('main') as HTMLElement);
  let option = {
    title: {
      text: '难度统计',

      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: (newData as any).value,
        type: 'pie',
        radius: '50%',
        data: newData.map(item => {

          return {
            name: item.value,
            value: item.count
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
// 饼图2
  var myChart1 = echarts.init(document.getElementById('file') as HTMLElement);
  let option1 = {
    title: {
      text: '文件分类统计',

      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: (newData1 as any).value,
        type: 'pie',
        radius: '50%',
        data: newData1.map(item => {

          return {
            name: item.value,
            value: item.count
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart1.setOption(option1);
  // 柱状图
})


</script>

<style lang='less' scoped></style>